import router from '@/router'
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { useRoute } from 'vue-router'

// tag 标签
export const useTagStore = defineStore(
  'tag',
  () => {
    // route 必须先声名
    const route = useRoute()
    const tagList = ref([
      {
        name: '文章管理',
        path: '/article/manage'
      }
    ])
    // 点击menu-item 添加对应的 tag 但是不能重复添加
    const addTag = (name, path) => {
      // 判断是否已经存在 some 如果至少有一个满足条件就返回true 否则返回false
      if (tagList.value.some((item) => item.path === path)) return
      tagList.value.push({ name, path })
    }

    // 点击删除单个 tag
    const removeTag = (item) => {
      // 判断删除的 tag 是否为高亮的 tag
      // 如果删除的 tag 不是高亮的 tag 则直接删除
      if (route.path !== item.path) {
        tagList.value = tagList.value.filter((tag) => tag.path !== item.path)
      } else {
        // 如果删除的 tag 是高亮的 tag 则需要判断删除的高亮是不是最后一个tag
        const index = tagList.value.findIndex((tag) => tag.path === item.path)
        // 如果删除的是最后一个 tag 则高亮向前移动一个 tag
        if (index === tagList.value.length - 1) {
          tagList.value.splice(index, 1)
          router.push(tagList.value[index - 1].path)
        }
        // 如果删除的不是最后一个 tag 则高亮向后移动一个 tag
        else {
          tagList.value.splice(index, 1)
          router.push(tagList.value[index].path)
        }
      }
    }
    // 清除所有 tag
    const clearTag = () => {
      tagList.value = [
        {
          name: '文章管理',
          path: '/article/manage'
        }
      ]
    }
    return {
      tagList,
      addTag,
      removeTag,
      clearTag
    }
  },
  {
    persist: true
  }
)
